<template>
 <div class="yingmoo-store">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
   
<!--  广告轮播  -->
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
<!--  今日热门  -->
    <div class="today">
      <ul class="today-nav">
        <li @click="getList(159,5),curr=1,setcurr(1)" style="cursor: pointer;" :style='{"background-color":curr==1? "#0f93f2":""}'>今日热门</li>
        <li @click="getList(160,5),curr=2,setcurr(2)" style="cursor: pointer;" :style='{"background-color":curr==2? "#0f93f2":""}'>特价</li>
        <li @click="getList(161,5),curr=3,setcurr(3)" style="cursor: pointer;" :style='{"background-color":curr==3? "#0f93f2":""}'>热销</li>
      </ul>
      <div class="today-model">
        <dl class="model" v-for="n in list1">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
          <div class="hov">
            <button class="hot">加关注</button>
            <button class="shop">购物车结算</button>
          </div>
        </dl>
      </div>
    </div>
<!--  人气媒体  -->
    <div class="yingmoo-template-model">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">人气媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>广州</span>
          <span>深圳</span>
          <span>武汉</span>
          <span>更多</span>
        </p>
      </div>
      <div class="column-content">
        <img width="384px" height="238px" v-for="v in list4" :src="v.imgpath" />
        <img width="384px" height="238px" v-for="v in list5" :src="v.imgpath" />
        <img width="384px" height="238px" v-for="v in list6" :src="v.imgpath" />
      </div>
      <div class="column-bottom">
        <dl class="media-model" v-for="n in list7">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
    </div>
<!--  公交媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">公交媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>公交车</span>
          <span>候车亭</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list8" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list9">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  高速媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">高速媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys1">
          <span>单立柱</span>
          <span>跨线桥</span>
          <span>龙门架</span>
          <span>大牌</span>
          <span>LED显示屏</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list11" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list12">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  机场媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">机场媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys2">
          <span>单立柱</span>
          <span>大牌</span>
          <span>灯箱</span>
          <span>电视</span>
          <span>登机牌</span>
          <span>手推车</span>
          <span>LED显示屏</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list14" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list15">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  地铁媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">地铁媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys3">
          <span>灯箱</span>
          <span>刷屏机</span>
          <span>外包车</span>
          <span>地铁内广告</span>
          <span>LED显示屏</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list17" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list18">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  火车媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">火车媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys4">
          <span>火车内广告</span>
          <span>灯箱</span>
          <span>刷屏机</span>
          <span>电视</span>
          <span>吊旗</span>
          <span>LED显示屏</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list20" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list21">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  楼宇媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">楼宇媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys5">
          <span>社区</span>
          <span>商住</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list23" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list24">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  特色区域媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">特色区域媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys6">
          <span>电影院</span>
          <span>学校</span>
          <span>停车场</span>
          <span>广场</span>
          <span>加油站</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list26" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list27">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  客运站媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">客运站媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys7">
          <span>客车内广告</span>
          <span>灯箱</span>
          <span>吊旗</span>
          <span>刷屏机</span>
          <span>大牌</span>
          <span>LED显示屏</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list29" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list30">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  市区媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">市区媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys8">
          <span>单立柱</span>
          <span>跨线桥</span>
          <span>龙门架</span>
          <span>大牌</span>
          <span>多面翻</span>
          <span>LED显示屏</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list32" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list33">
          <dt>
            <a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
          <a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  商超媒体  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">商超媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys citys9">
          <span>灯箱</span>
          <span>看板</span>
          <span>海报</span>
          <span>电视</span>
          <span>LED显示屏</span>
        </p>
      </div>
      <div class="column-bottom">
        <img v-for="v in list35" width="222px" height="232px" :src="v.imgpath" class="img" />
        <dl class="media-model" v-for="n in list36">
          <dt>
          	<a :href="n.linkurl" target="_blank"><img width="224px" height="146px" :src="n.imgpath" /></a>
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
      <div class="column-footer">
        <div class="footer" v-for="v in list10">
    		<a :href="v.linkurl" target="_blank"><img width="224px" height="163px" :src="v.imgpath" /></a>
          <p class="p" :title='v.name'>{{v.name}}</p>
        </div>
      </div>
    </div>
<!--  为您推荐  -->
    <div class="yingmoo-storemodel">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">为您推荐</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-bottom">
      	<ul>
      		<li class="media-model" style="float: left;margin: 8px;" v-for="n in list38">
		        <dl>
		          <dt>
		          	<a :href="n.linkurl" target="_blank">
		            	<img width="224px" height="146px" :src="n.imgpath" />
		            </a>
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city">{{n.remark}}</dd>
		        </dl>
      		</li>
      	</ul>
      </div>
    </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymFooter from "@/components/ymFooter.vue";
  import ymSecondnav from "@/components/ymSecondnav.vue";
  export default {
    name: "yingmoo-store",
    components: {
      ymHeader,
      ymMedianav,
      ymSecondnav,
      ymFooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        /* banner数据，方便修改 */
        banners: [{
          imgUrl: require('@/assets/ym-store/store-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-store/store-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-store/store-lunbo.png')
        }],
        curr: 1,
        list1:[],
        list2:[],
        list3:[],
        list4:[],
        list5:[],
        list6:[],
        list7:[],
        list8:[],
        list9:[],
        list10:[],
        list11:[],
        list12:[],
        list13:[],
        list14:[],
        list15:[],
        list16:[],
        list17:[],
        list18:[],
        list19:[],
        list20:[],
        list21:[],
        list22:[],
        list23:[],
        list24:[],
        list25:[],
        list26:[],
        list27:[],
        list28:[],
        list29:[],
        list30:[],
        list31:[],
        list32:[],
        list33:[],
        list34:[],
        list35:[],
        list36:[],
        list37:[],
        list38:[]
      }
    },
    mounted(){		
		this.getList(197,3);//轮播
		this.getList(159,5);//今日热门	
		this.getList(162,1);//人气媒体-地铁
		this.getList(163,1);//人气-高速
		this.getList(164,1);//人气-机场
		this.getList(165,5);//人气-图片组
		
		this.getList(166,1);//公交推荐
		this.getList(167,4);
		this.getList(168,5);
		
		this.getList(169,1);//高速推荐
		this.getList(170,4);
		this.getList(171,5);
		
		this.getList(172,1);//机场推荐
		this.getList(173,4);
		this.getList(174,5);
		
		this.getList(175,1);//地铁推荐
		this.getList(176,4);
		this.getList(177,5);
		
		this.getList(178,1);//火车推荐
		this.getList(179,4);
		this.getList(180,5);
		
		this.getList(181,1);//楼宇推荐
		this.getList(182,4);
		this.getList(183,5);
		
		this.getList(184,1);//特区推荐
		this.getList(185,4);
		this.getList(186,5);
		
		this.getList(187,1);//客运站推荐
		this.getList(188,4);
		this.getList(189,5);
		
		this.getList(190,1);//楼宇推荐
		this.getList(191,4);
		this.getList(192,5);
		
		this.getList(193,1);//楼宇推荐
		this.getList(194,4);
		this.getList(195,5);
		
		this.getList(196,10);//为您推荐
		
    this.getcurr();
	},
	methods:{
		getList:function(adid ,limit){
	  		this.$http({
				url: this.requestAddr+'/GetJson/get/adshow?adid='+adid+"&limit="+limit,
				method: 'JSONP',
			    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				jsonp: 'callbackparam'
			}).then(res => {
				/*console.log(res.data);*/
				if(res.data != null){
					if(adid == 197){this.banners = res.data;}
					if(adid == 159){this.list1 = res.data;}
					if(adid == 160){this.list1 = res.data;}
					if(adid == 161){this.list1 = res.data;}
					
					if(adid == 162){this.list4 = res.data;}
					if(adid == 163){this.list5 = res.data;}
					if(adid == 164){this.list6 = res.data;}
					if(adid == 165){this.list7 = res.data;}
					
					if(adid == 166){this.list8 = res.data;}
					if(adid == 167){this.list9 = res.data;}
					if(adid == 168){this.list10 = res.data;}
					if(adid == 169){this.list11 = res.data;}
					if(adid == 170){this.list12 = res.data;}
					if(adid == 171){this.list13 = res.data;}
					if(adid == 172){this.list14 = res.data;}
					
					if(adid == 173){this.list15 = res.data;}
					if(adid == 174){this.list16 = res.data;}
					if(adid == 175){this.list17 = res.data;}
					if(adid == 176){this.list18 = res.data;}
					if(adid == 177){this.list19 = res.data;}
					if(adid == 178){this.list20 = res.data;}
					if(adid == 179){this.list21 = res.data;}
					if(adid == 180){this.list22 = res.data;}
					if(adid == 181){this.list23 = res.data;}
					if(adid == 182){this.list24 = res.data;}
					if(adid == 183){this.list25 = res.data;}
					if(adid == 184){this.list26 = res.data;}
					if(adid == 185){this.list27 = res.data;}
					if(adid == 186){this.list28 = res.data;}
					if(adid == 187){this.list29 = res.data;}
					if(adid == 188){this.list30 = res.data;}
					if(adid == 189){this.list31 = res.data;}
					if(adid == 190){this.list32 = res.data;}
					if(adid == 191){this.list33 = res.data;}
					if(adid == 192){this.list34 = res.data;}
					if(adid == 193){this.list35 = res.data;}
					if(adid == 194){this.list36 = res.data;}
					if(adid == 195){this.list37 = res.data;}
					if(adid == 196){this.list38 = res.data;}
					
					
					
				}
			}).catch()
		},
    setcurr:function(ear){
      window.sessionStorage.setItem('ear',ear)
        window.sessionStorage.removeItem('index')
    },
    getcurr:function(){
      this.curr= window.sessionStorage.getItem('ear')
    }
	}
  }
</script>

<style scoped lang="less">
  .yingmoo-store {
    width: 100%;
    background-color: #f3f9ff;
    .ym-lunbo {
      width: 100%;
      height: 450px;
      position: absolute;
      top: 234px;
      left: 0;
      z-index: 1;
    }
    .today {
      width: 1200px;
      height: 310px;
      margin: 0 auto;
      margin-top: 30px;
      .today-nav {
        width: 1200px;
        height: 44px;
        display: flex;
        background-color: #3fa9f5;
        li {
          width: 136px;
          text-align: center;
          line-height: 44px;
          color: #fff;
          font-size: 15px;
          background-image: url(../assets/ym-index/bg-nav.png);
          background-position: right center;
          background-repeat: no-repeat;
          &:hover {
            background-color: darken(#3fa9f5, 10%);
            /*            036eb7*/
          }
        }
      }
      .today-model {
        width: 1200px;
        height: 236px;
        display: flex;
        justify-content: space-between;
        .model {
          width: 224px;
          height: 236px;
          background-color: white;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 14px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow: clip;
            height: 24px;
          }
          .media-text-secend {
            font-size: 12px;
            color: red;
          }
          .media-text-city {
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
          }
        }
        .hov {
          display: flex;
          justify-content: space-around;
          /*
          position: relative;
          bottom: 62px;
*/
          display: none;
          button {
            width: 101px;
            height: 40px;
            border: none;
            font-size: 12px;
            margin-top: 15px;
          }
          .hot {
            background-color: #e6e6e6;
            color: #999999;
            background-image: url(../assets/ym-details/hot.png);
            background-repeat: no-repeat;
            background-position: 25% center;
            text-align: center;
            padding-left: 30px;
            &:hover {
              background-image: url(../assets/ym-details/hot-hover.png);
              color: #f29600;
            }
          }
          .shop {
            background-color: #f29600;
            color: white;
            background-image: url(../assets/ym-details/shop.png);
            background-repeat: no-repeat;
            background-position: 15% center;
            text-align: center;
            padding-left: 30px;
            &:hover {
              background-color: #bf7d1f;
            }
          }
        }
      }
    }
    .yingmoo-template-model {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 410px;
          background: none;
          color: #999999;
          margin-right: 20px;
          float: right;
          span {
            padding-left: 15px;
            padding-right: 20px;
            font-size: 14px;
          }
        }
      }
      .column-content {
        width: 1200px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
      }
      .column-bottom {
        width: 1200px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        .img {
          height: 232px;
          margin-top: 20px;
        }
        .media-annimation {
          margin-top: 20px;
        }
        .media-model {
          width: 224px;
          height: 236px;
          background-color: white;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 14px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow: clip;
            height: 24px;
          }
          .media-text-secend {
            font-size: 12px;
            color: red;
          }
          .media-text-city {
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
          }
        }
      }
      .column-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .footer{
          background-color: white;
          .p{
            font-size: 14px;
            text-align: center;
            overflow: hidden;
            text-overflow: clip;
            height: 24px;
            line-height: 24px;
          }
        }
      }
    }
    .yingmoo-storemodel {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 170px;
          background: none;
          color: #999999;
          margin-right: 20px;
          float: right;
          span {
            padding-left: 20px;
            padding-right: 20px;
            font-size: 14px;
          }
        }
        .citys1{
          width: 445px;
        }
        .citys2{
          width: 590px;
        }
        .citys3{
          width: 480px;
        }
        .citys4{
          width: 530px;
        }
        .citys5{
          width: 145px;
        }
        .citys6{
          width: 410px;
        }
        .citys7{
          width: 530px;
        }
        .citys8{
          width: 530px;
        }
        .citys9{
          width: 400px;
        }
      }
      .column-content {
        width: 1200px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
      }
      .column-bottom {
        width: 1200px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        .img {
          height: 232px;
          margin-top: 20px;
        }
        .media-annimation {
          margin-top: 20px;
        }
        .media-model {
          width: 224px;
          height: 236px;
          background-color: white;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 14px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow: clip;
            height: 24px;
          }
          .media-text-secend {
            font-size: 12px;
            color: red;
          }
          .media-text-city {
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
          }
        }
      }
      .column-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .footer{
          background-color: white;
          .p{
            font-size: 14px;
            text-align: center;
            overflow: hidden;
            text-overflow: clip;
            height: 40px;
            line-height: 40px;
          }
        }
      }

    }
  }

</style>
